
<template>
<view>
	<view class="canvasContent" v-if="canvasShow">
		<canvas canvas-id="shareCanvas" class="canvasName"></canvas>
			
	</view>
</view>
</template>



<script>
export default {
  data() {
    return {
			canvasShow: false
    }
  },
  onLoad() {
  	this.shareClick()
  },
  methods: {
		//这是一个封装好的方法  
		promisify: api => {
			return (options, ...params) => {
				return new Promise((resolve, reject) => {
					const extras = {
						success: resolve,
						fail: reject
					}
					api({ ...options, ...extras }, ...params)
				})
			}
		},
		shareClick() {			
			const wxGetImageInfo = this.promisify(uni.getImageInfo)
			const { windowWidth, windowHeight } = uni.getSystemInfoSync();	
		
			const data=[
				{
					'type':'qrcode',
					'small':'top',
					'top':107,
					'left':211,
					'align':'left',
					'bg':'http://pics.ksudi.com/pic/2019/soms/companycard/jd2.png',
					'width':375,
					'height':724
				},
				{
					'type':'qrcode',
					'small':'top',
					'top':152,
					'left':57,
					'align':'left',
					'bg':'http://pics.ksudi.com/pic/2019/soms/companycard/st2.png',
					'width':200,
					'height':200
				},
				
			]
			let readImg=[];
			//远程图片转本地
			Object.keys(data).map(function(key){
				readImg[key]=wxGetImageInfo({src: data[key].bg})
				
			})
			
			Promise.all(readImg).then(res => {
					const ctx = uni.createCanvasContext('shareCanvas')
					//图片叠加
					Object.keys(res).map((index)=>{
						ctx.drawImage(res[index].path, data[index].top, data[index].left, data[index].width, data[index].height)
					})
		
					
					ctx.stroke()
					ctx.draw(false,() => {
						//this.tempFileImage()
					})
					this.canvasShow = true
			})
		},
	
		tempFileImage() {
			let that = this
			uni.canvasToTempFilePath({
					canvasId: 'shareCanvas',
					success: (res) => {
							uni.hideLoading()
							that.savePic(res.tempFilePath)
					},
					fail:function () {
							//TODO
					}
			})
		},
		//保存
		savePic (filePath) {
			console.log('filePath', filePath)
			uni.showLoading({
					title: '正在保存'
			});
			uni.saveImageToPhotosAlbum({
					filePath: filePath,
					success: function () {
							uni.showToast({
									title: '图片保存成功～'
							});
					},
					fail: function (e) {
							//TODO
					},
					complete: function (){
							uni.hideLoading()
					}
			});
		}
  }
}
</script>


<style lang="scss" scoped>
	.canvasContent{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		background: rgba(0,0,0,0.5);
		display: flex;
		align-items: center;
		flex-direction: column;
		.canvasName{
			width: 100%;
			height: 100%;
		}
	
	}
</style>